<template>
  <div class="statusBar" @click="routerPush('/ErrorListActive')">
    <!-- <vue3-seamless-scroll :list="items" class="scroll"> -->
    <!-- <transition-group name="fade" tag="ul"> -->
     
    <el-timeline>
      <el-timeline-item
        v-for="(item, index) in allData.iOffside"
        type="danger"
        :key="item.id"
        center
        :timestamp="dateFom(item.createTime)"
        placement="top"
      >
        <div
          style="
            background-color: #f56c6c;
            box-sizing: border-box;
            padding: 0 10px;
          "
        >
          <h4 style="padding: 10px 0; color: #fff">
            {{ keyName(item.keyname, item.warnvalue, item.keyvalue) }}
          </h4>
          <!-- <p>{{ info }}</p> -->
        </div>
      </el-timeline-item>
    </el-timeline>
    <!-- </transition-group> -->
    <!-- </vue3-seamless-scroll> -->
    <!-- <div class="list"> -->
    <!-- <div class="cc rowup"> -->
    <!-- <transition-group name="fade" tag="ul">
					<el-timeline>
						<el-timeline-item
							v-for="(item, index) in items"
              :type="types[item.type]"
							:key="item.id"
							class="fade-item"
							center
							timestamp="2018/4/12"
							placement="top">
							<el-card>
								<h4>{{ item.title }}</h4>
								<p>{{ info }}</p>
							</el-card>
						</el-timeline-item>
					</el-timeline>
				</transition-group> -->
    <!-- </div> -->
    <!-- </div> -->
  </div>
</template>
<script setup>
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import { routerPush, routerReplace } from "@/plugins/index.js";
import moment from "moment";
let allData = inject("allData");
let types = ref(["primary", "success", "warning", "danger", "info"]);
let dateFom = computed(() => {
  return (dataNub) => {
    return moment(new Date(dataNub)).format("YYYY-MM-DD HH:mm:ss");
  };
});
let keyName = computed(() => {
  return (str, warVal, keyVal) => {
    let strs = str;
    if (keyVal > warVal) return strs + "高";
    if (keyVal < warVal) return strs + "低";
  };
});
</script>
<style scoped>
/* :deep(.el-timeline){
	padding: 0 !important;
} */
:deep(.el-timeline-item__node--normal) {
  left: 0 !important;
}
:deep(.el-timeline-item__tail) {
  left: 5px !important;
}

@keyframes rowup {
  0% {
    -webkit-transform: translate3d(0, -707px, 0);
    transform: translate3d(0, -707px, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.statusBar {
  box-sizing: border-box;
  padding-top: 20px;
  /* height: 100px; */
  overflow: hidden;
  /* height: 800px; */
  cursor: pointer;
}
.list {
  width: 300px;
  /* border: 1px solid #999; */
  margin: 20px auto;
  position: relative;
  height: 700px;
  overflow: hidden;
  box-sizing: border-box;
  /* padding: 0 20px; */
}

.list .rowup {
  /* -webkit-animation: 10s rowup linear infinite normal; */
  /* animation: 10s rowup linear infinite normal; */
  position: relative;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.fade-item {
  list-style: none;
}
</style>
